<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"> <!--<![endif]-->

<head>
	<meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Nicolas Bermond - Web Developper</title>

  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.css" />
 <link href="http://fonts.googleapis.com/css?family=Advent+Pro:200" rel="stylesheet" type="text/css" />
  <script src="js/vendor/custom.modernizr.js"></script>
<style>
  h1,h2,h3,h4,h5{
    font-family:"Freestyle Script", Century, "Century Gothic", Arial;
    font-weight:200;
  }
  h1{
    font-size: 60px;
  }
  .myhead h1, .myhead h4{
    color: #fff;
  }

  .myhead img{
    width:75px;
    float:left;
    padding-top:1.5%;
  }
  .dark{
    background-color: #111111;
    padding: 30px 0 20px 0;
  }
  .lightT{
    color:#9cf;
  }
  .main{
    padding: 20px 0 20px 0;
    background-color: #111111;
  }
  .color{
    background-color: #c9c1d4;
  }
  #titre{
    padding-top:4.5%;
  }
  @media only screen and (min-width: 48em){
    .myhead{
       margin-top: -50px;
       padding-top: 200px;
       padding-bottom: 50px;
       background: url(img/toulouse.jpg) no-repeat;
       background-size: 100%;
       background-position: center center;

    }
   

  }
  @media only screen and (max-width: 48em){
    .myhead{
       margin-top: -50px;
       padding-top: 200px;
       padding-bottom: 50px;
       background: url(img/capitole.jpg) no-repeat;
       background-size: 100%;
       background-position: center center;
       background-color: #111111;
       
    }
   h1{
    font-size: 30px;
  }
.myhead img{
    width:35px;
    float:left;
    padding-top:1.5%;
  }
  }
  </style>
</head>
<body>

	<!-- Navigation -->
 
  <nav class="top-bar">
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1>
          <a href="#">City Scapes</a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    </ul>
 
    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">About Us</a>
          <ul class="dropdown">
            <li><label>Section Name</label></li>
            <li class="has-dropdown">
              <a href="#" class="">Has Dropdown, Level 1</a>
              <ul class="dropdown">
                <li><a href="#">Dropdown Options</a></li>
                <li><a href="#">Dropdown Options</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Subdropdown Option</a></li>
                <li><a href="#">Subdropdown Option</a></li>
                <li><a href="#">Subdropdown Option</a></li>
              </ul>
            </li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><label>Section Name</label></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><a href="#">See all &rarr;</a></li>
          </ul>
        </li>
        <li class="divider"></li>
        <li><a href="#">Portfolio</a></li>
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Guide</a>
          <ul class="dropdown">
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><a href="#">See all &rarr;</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav> 
  <!-- Header -->
 <header class="myhead">
  <div class="row" id="titre">
    <div class="twelve columns">
      <img src="img/arobase.png" alt="logo">
      <h1>Nicolas Bermond - Web Developper</h1>
      
    </div>
  </div>
 </header>

  <!-- Main content -->
  <div class="main">
      <ul class="tabs vertical hide-on-phones">
  <li class="active"><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>
  </div>
 
 
  <!-- Footer -->
 <div class="dark">
   <footer class="row">
    <div class="large-12 columns">
      <div class="row">
        <div class="large-6 columns">
          <p class="lightT">&copy; WebDesign magazine</p>
        </div>
        <div class="large-6 columns">
          <ul class="inline-list right">
            <li><a href="#">Lien 1</a></li>
            <li><a href="#">Lien 2</a></li>
            <li><a href="#">Lien 3</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
 </div>
  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>  
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>
